<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue3.js -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <!-- vue2.js -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
</head>

<body>
    <div id="app">
        <!-- <ul>
            <li v-for="item in hreoArr" v-show="item.type=='战士'">{{item.name}}</li>
        </ul> -->
        <ul>
            <template v-for="item in hreoArr">
                <li v-if="item.type=='战士'">{{item.name}}</li>
            </template>

        </ul>

    </div>
</body>

</html>
<script>
    // 面试题? 
    // v-if 和v-for 如果用在同一个标签上,谁的优先级最高?

    // 在vue3中, v-if 的优先级高于v-for;
    // 在vue2中, v-for的优先级高于v-if

    //  解决这个问题?
    // 不考虑前后的顺序问题 =>
    // 方法1:使用v-show 代替v-if
    // 方法2: 不让v-if 和v-for 写在同一个标签上,使用template 这个空标签(不会渲染在dom 中,只起到一个包裹作用),上使用v-for

    const app = Vue.createApp({
        data() {
            return {
                hreoArr: [
                    {
                        id: 1,
                        name: "典韦",
                        type: '战士'
                    },
                    {
                        id: 2,
                        name: "李白",
                        type: '刺客'
                    },
                    {
                        id: 3,
                        name: "诸葛亮",
                        type: '法师'
                    },
                    {
                        id: 4,
                        name: "夏侯惇",
                        type: '战士'
                    }
                ],
            }
        },
        methods: {

        }
    }).mount('#app')

    // const app = new Vue({
    //     data: {
    //         hreoArr: [
    //             {
    //                 id: 1,
    //                 name: "典韦",
    //                 type: '战士'
    //             },
    //             {
    //                 id: 2,
    //                 name: "李白",
    //                 type: '刺客'
    //             },
    //             {
    //                 id: 3,
    //                 name: "诸葛亮",
    //                 type: '法师'
    //             },
    //             {
    //                 id: 4,
    //                 name: "夏侯惇",
    //                 type: '战士'
    //             }
    //         ],
    //     }

    // })
    // app.$mount('#app')

</script>